<template>
  <el-container>
    <el-main style="padding: 0">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="红包" name="first"></el-tab-pane>
        <el-tab-pane label="店铺红包" name="second"></el-tab-pane>
        <el-tab-pane label="抵用券" name="third"></el-tab-pane>
      </el-tabs>

      <el-card v-show="lists" v-for="(list,i) in lists" :key="i" style="margin-bottom: 10px">
        <el-row>
          <el-col :span="4">￥{{list.discount}}</el-col>
          <el-col :span="14">
            <h3>{{list.name}}</h3>
            <p>· 仅用于指定商家</p>
            <p>· 限{{list.begin}}至{{list.end}}使用</p>
            <p>· 满{{list.money}}元可用</p>
          </el-col>
          <el-col :span="6">
            <el-button size="mini">进店使用</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card v-show="!lists" style="text-align: center">
        <h3> 没有 {{tab}} </h3>
        <p>快去购物吧~</p>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: "RedEnvelop",
        data() {
            return {
                activeName: 'first',
                redEnvelop: [
                    {discount: 8, name: '红包5', money: '40', begin: '2019-10-22', end: '2019-10-27'},
                    {discount: 3, name: '红包6', money: '40', begin: '2019-10-20', end: '2019-10-29'},
                    {discount: 11, name: '红包7', money: '100', begin: '2019-10-22', end: '2019-10-22'},
                    {discount: 5, name: '红包8', money: '40', begin: '2019-10-21', end: '2019-10-23'}],
                shop: [
                    {discount: 3, name: '店铺名称1', money: '40', begin: '2019-10-22', end: '2019-10-27'},
                    {discount: 3, name: '店铺名称2', money: '40', begin: '2019-10-20', end: '2019-10-29'},
                    {discount: 11, name: '店铺名称3', money: '100', begin: '2019-10-22', end: '2019-10-22'},
                    {discount: 5, name: '店铺名称4', money: '40', begin: '2019-10-21', end: '2019-10-23'},
                    {discount: 8, name: '店铺名称5', money: '30', begin: '2019-10-12', end: '2019-10-27'}],
                discount: null,
                lists: null,
                tab: '红包'
            };
        },
        methods: {
            handleClick(tab) {
                if (tab.index === '0') {
                    this.lists = this.redEnvelop;
                    this.tab = '红包'

                } else if (tab.index === '1') {
                    this.lists = this.shop;
                    this.tab = '店铺红包'
                } else {
                    this.lists = this.discount;
                    this.tab = '抵用券'
                }
            },
            getList() {
                this.lists = this.redEnvelop;
            },
        },
        created() {
            this.getList();
        }
    }
</script>

<style scoped>
  p {
    font-size: 12px;
    margin: 0;
    color: grey;
  }

  h3 {
    margin: 0;
    font-size: 18px;
    margin-bottom: 5px;
  }
</style>
